<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>首页</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="holidaymaker Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/><!-- //pop-ups-->
    <!-- team-->
    <link href="css/ihover.css" rel="stylesheet" type="text/css" media="all"/><!-- //team -->
    <link rel="stylesheet" href="css/swipebox.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- fonts -->
    <link href="//fonts.googleapis.com/css?family=Merienda:400,700" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <!-- //fonts -->
</head>
<body>
<!-- banner -->
<div class="banner-figures">
    <div class="banner">
        <div class="container banner-drop">
            <div class="header">
                <div class="header-left logo">
                    <h1><a href="index.html">旅家</a></h1>
                </div>
                <div class="header-right">
                    <nav>
                        <ul>
                            <li class="active">
                                <a href="index.html" class="active"><span>首页</span></a>
                            </li>
                            <li>
                                <a href="about.html"><span>关于</span></a>
                            </li>
                            <li>
                                <a href="login.html">登录/注册</a>
                            </li>
                            <li>
                                <a href="#services" class="scroll"><span>服务</span></a>
                            </li>
                            <li>
                                <a href="#gallery" class="scroll"><span>风景画廊</span></a>
                            </li>
                            <li>
                                <a href="#contact" class="scroll"><span>联系我们</span></a>
                            </li>
                        </ul>
                    </nav>
                    <div class="menu-icon animated wow zoomIn" data-wow-duration="1000ms" data-wow-delay="800ms">
                        <span></span></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="banner-text-agileits">
                <h3>享受您的梦想假期</h3>
                <p>以专业的精神寻找最完美的旅行。</p>
            </div>
            <div class="subscribe">
                <form action="#" method="post">
                    <input type="search" class="Search" name="Search" required="">
                    <input type="submit" value="">
                </form>
            </div>

        </div>
    </div>
</div>
<!-- //banner -->
<!--about-->
<div class="about-agileits" id="about">
    <h3 class="tittle">About Us</h3>
    <p class="head-p-w3ls"> We make travelling safer and easier.</p>
    <div class="about-info">
        <div class="col-md-3 about-left-agileinfo">
            <div class="about-grids-wthree">
                <div class="grid">
                    <h4>Make Collage</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="grid">
                    <h4>Add Photos</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="grid">
                    <h4>Keep Rocking</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-6 about-left">
        </div>
        <div class="col-md-3 about-right-agileinfo">

            <div class="about-grids-wthree">
                <div class="grid">
                    <h4>Get Inspired</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="grid">
                    <h4>Love The World</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="grid">
                    <h4>Be Passionate</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut metus sit amet magna.</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--//about-->
<!--video-->

<!--//video-->
<!-- team -->

<!-- //team -->
<!-- services -->
<div class="jarallax services" id="services">
    <div class="container">
        <h3 class="tittle">服务</h3>
        <p class="head-p-w3ls">我们将提供最贴心的服务.</p>
        <div class="w3layouts-grids">
            <div class="services-right-grids">
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-building" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>酒店</h5>
                        <p>点击进入酒店预订.</p>
                    </div>
                </div>
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-home" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>房屋短租</h5>
                        <p>房屋短期租赁.</p>
                    </div>
                </div>
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>购物</h5>
                        <p>最佳购物场所.</p>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="services-right-grids">
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-cutlery" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>餐饮</h5>
                        <p>吃饭的地方.</p>
                    </div>
                </div>
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-plane" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>机票预订</h5>
                        <p>点击进入机票预订.</p>
                    </div>
                </div>
                <div class="col-sm-4 services-right-grid">
                    <div class="services-icon hvr-radial-in">
                        <i class="fa fa-volume-control-phone" aria-hidden="true"></i>
                    </div>
                    <div class="services-icon-info">
                        <h5>资讯</h5>
                        <p>点击资讯客服，了解更多.</p>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<!-- //services -->
<!-- destinations -->
<!--plan-->
<div class="jarallax plan">
    <h5>发现新的世界</h5>
    <h6>跟随我们一起去探索新的有趣的世界.</h6>
    <div class="read-w3ls">
        <a href="#small-dialog" class="play-icon popup-with-zoom-anim readmore">查看更多...</a>
    </div>
    <div id="small-dialog" class="mfp-hide w3ls_small_dialog wthree_pop">
        <div class="agileits_modal_body">
            <h4>旅家</h4>
            <img src="images/plan.jpg" alt=" " class="img-responsive">
            <h5>发现新的世界</h5>
            <p>探索新的有趣的地方，本身就是一件最有趣的事情.</p>

        </div>
    </div>
</div>
<!--//plan-->
<!--Gallery-->
<div class="gallery" id="gallery">
    <div class="container">
        <h3 class="tittle">风景画廊</h3>
        <p class="head-p-w3ls">世界上已知最美的风景在这里都能找到.</p>
        <div class="gallery-grids">
            <div class="col-md-8 col-sm-8 ggd baner-top big wow fadeInRight animated" data-wow-delay=".5s">
                <a href="images/g3.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g3.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>海边风景</h4>
                                <span class="separator"></span>
                                <p>最美的海景.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 ggd baner-top small wow fadeInLeft animated" data-wow-delay=".5s">
                <a href="images/g1.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g1.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>林中小屋</h4>
                                <span class="separator"></span>
                                <p>享受林中小屋的静谧.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 ggd baner-top small ban-mar wow fadeInUp animated" data-wow-delay=".5s">
                <a href="images/g2.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g2.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>度假屋</h4>
                                <span class="separator"></span>
                                <p>最适合度假的地方.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-8 col-sm-8 ggd baner-top big ban-mar wow fadeInDown animated" data-wow-delay=".5s">
                <a href="images/g5.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g5.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>日光浴</h4>
                                <span class="separator"></span>
                                <p>最佳日光浴场.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 ggd baner-top three wow fadeInLeft animated gap-w3" data-wow-delay=".5s">
                <a href="images/g4.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g4.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4> 风景独秀</h4>
                                <span class="separator"></span>
                                <p>风景独秀.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 ggd baner-top three wow fadeInLeft animated" data-wow-delay=".5s">
                <a href="images/g6.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g6.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>风景独秀</h4>
                                <span class="separator"></span>
                                <p>风景独秀.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 ggd baner-top three thre wow fadeInLeft animated" data-wow-delay=".5s">
                <a href="images/g7.jpg" class="b-link-stripe b-animate-go  swipebox">
                    <div class="gal-spin-effect vertical ">
                        <img src="images/g7.jpg" alt=" "/>
                        <div class="gal-text-box">
                            <div class="info-gal-con">
                                <h4>风景独秀</h4>
                                <span class="separator"></span>
                                <p>风景独秀.</p>
                                <span class="separator"></span>

                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //gallery -->
<!-- contact -->
<div class="jarallax contact" id="contact">
    <div class="container">
        <h3 class="tittle">留言联系我们</h3>

        <div class="col-md-12 contact-agileits-w3layouts">
            <form action="#" method="post">
                <input type="text" name="Your Name" placeholder="称呼" required=""/>
                <input type="email" name="Your Email" placeholder="邮箱" required=""/>
                <input type="text" Name="Phone Number" placeholder="手机号" required=""/>
                <textarea name="Message" placeholder="内容" required=""></textarea>
                <input type="submit" value="发送">
            </form>
            <h5 class="sub">联系方式</h5>
            <p><span>地址</span> xxx</p>
            <p><span>手机</span> : +33 892 35 35 35</p>
            <p><span>邮箱</span><a href="mailto:xxx@qq.com"> : xxx@qq.com</a></p>
        </div>

    </div>
</div>
<!-- //about -->
<div class="footer">
    <div class="container">
        <h3><a href="index.html">旅家</a></h3>
        <p>© 2017 旅家. All rights reserved</p>
        <div class="social-icons animated wow bounceInDown" data-wow-duration="1000ms" data-wow-delay="800ms">
            <ul class="top-links">

                <li><a href="#"><i class="fa fa-wechat"></i></a></li>
                <li><a href="#"><i class="fa fa-weibo"></i></a></li>
                <li><a href="#"><i class="fa fa-qq"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- //footer -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
    (function ($) {
        $(".menu-icon").on("click", function () {
            $(this).toggleClass("open");
            $(".container").toggleClass("nav-open");
            $("nav ul li").toggleClass("animate");
        });

    })(jQuery);
</script>
<!-- swipe box js -->
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $(".swipebox").swipebox();
    });
</script>
<!-- //swipe box js -->

<!-- jarallax-js -->
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<!-- //jarallax-js -->
<!--pop-up-box -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

    });
</script>
<!-- //pop-up-box -->

<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
            };
        */

        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<!-- //here ends scrolling icon -->
<!-- start-smooth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
        });
    });
</script>
<!-- start-smooth-scrolling -->
</body>
</html>